<template>
  <div class="micro-app-container">
    <micro-app
      name="user-app"
      url="http://localhost:3001/"
      :data="appData"
      baseroute="/user"
      iframe
      fiber
      router-mode="native-scope"
      @mounted="handleMounted"
      @unmount="handleUnmount"
      @error="handleError"
    ></micro-app>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const appData = ref({
  type: "user-management",
  token: localStorage.getItem("token") || "",
  userInfo: JSON.parse(localStorage.getItem("userInfo") || "{}"),
});

const handleMounted = () => {
  console.log("用户管理子应用已挂载");
};

const handleUnmount = () => {
  console.log("用户管理子应用已卸载");
};

const handleError = (error) => {
  console.error("用户管理子应用加载失败:", error);
};
</script>

<style scoped>
.micro-app-container {
  width: 100%;
  height: 100%;
}
</style>
